<template>
  <div>
    <!-- 事件分析-事件图谱 -->
    <div class="two">
      <div class="form">
        <el-form :inline="true" :model="formInline1" class="demo-form-inline">
          <el-form-item label="公司名称">
            <el-input v-model="formInline1.company" placeholder="公司名称：" size="mini"></el-input>
          </el-form-item>

          <el-form-item label="事件类型">
            <el-select v-model="formInline1.event_type" placeholder="事件类型：" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker v-model="formInline1.start_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-date-picker v-model="formInline1.end_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button class="grayish_btn" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-card :body-style="{padding:0}" style="height: 510px;">
        <span class="superscript" style="width: 20px; height: 40px;">事件图谱</span>
        <div>
          <div ref="echarts_1" style="height: 500px"></div>
        </div>
      </el-card>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="100%">
      <el-card style="height:100%; margin-bottom:10px;" :body-style="{padding:0}">
        <div style="display:flex;">
          <el-divider direction="vertical" class="sublabel"></el-divider>
          <span class="title">事件详情</span>
        </div>
        <el-table :data="detailData" style="width: 100%" border>
          <el-table-column width="500" prop="事件名称" label="事件名称"></el-table-column>
          <el-table-column width="300" prop="法人代表" label="法人代表"></el-table-column>
          <el-table-column width="200" prop="事件日期" label="事件日期"></el-table-column>
          <el-table-column width="50" prop="分歧度" label="分歧度"></el-table-column>
          <el-table-column width="80" prop="等级" label="风险等级"></el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { Loading } from "element-ui";
import http from '../utils/request';

export default {
  name: 'EventAnalysis',
  data() {
    return {
      dialogVisible: false,
      detailData: [],
      tableData: [],
      formInline1: {
        company: '',
        event_type: '',
        start_date: '',
        end_date: '',
      },
      options: [
        { value: '', label: '全部' },
        { value: '股权增持', label: '股权增持' },
        { value: '股东减持', label: '股东减持' },
        { value: '股权质押', label: '股权质押' },
        { value: '其他', label: '其他' },
        { value: '重大财产损失', label: '重大财产损失' },
        { value: '重大安全事故', label: '重大安全事故' },
        { value: '股权冻结', label: '股权冻结' },
        { value: '高层死亡', label: '高层死亡' },
        { value: '破产清算', label: '破产清算' },
        { value: '重大对外赔付', label: '重大对外赔付' }
      ],
    };
  },
  methods: {
    onSubmit1() {
      this.tableData.length = 0;
      let options = { text: '请稍等' };
      let loadingInstance = Loading.service(options);

      http.get("/event2/event_analyse/", {
        params: {
          name: this.formInline1.company,
          event_type: this.formInline1.event_type,
          start: this.formInline1.start_date,
          end: this.formInline1.end_date,
          need: 1,
        }
      }).then(response => {
        this.tableData = response.data.data.data;
        let links = response.data.data.edges;
        let intLink = [];

        for (let i in links) {
          intLink.push({
            source: this.tableData.find(obj => obj.order === parseInt(links[i].source)).title,
            target: this.tableData.find(obj => obj.order === parseInt(links[i].target)).title
          });
        }

        this.changeChart(intLink);
      });

      loadingInstance.close();
    },
    changeChart(links) {
      const echarts1 = echarts.init(this.$refs.echarts_1);
      const markLineList = [];
      const timeList = [];
      const nor_time = [];
      const nodeid = [];
      const new_data = [];
      let count = 0;

      for (let { publish_time: time } of this.tableData) {
        nor_time.push(time);
        if (timeList.indexOf(time) === -1) {
          timeList.push(time);
          nodeid.push(count);
          markLineList.push({ xAxis: count });
          count = count + 1;
        }
      }

      timeList.sort((a, b) => a.split(' ')[0] < b.split(' ')[0] || (a.split(' ')[0] === b.split(' ')[0] && a.split(' ')[1] < b.split(' ')[1]) ? -1 : 1);

      const tmp = [];
      const new_data = [];

      for (let i = 0; i < this.tableData.length; i++) {
        let y = Math.floor(Math.random() * 10) + 1;
        let x = timeList.indexOf(this.tableData[i].publish_time);
        while (tmp.find(value => value === [x, y])) y = Math.floor(Math.random() * 10) + 1;
        tmp.push([x, y]);

        new_data.push({
          id: parseInt(this.tableData[i].order),
          name: this.tableData[i].title,
          symbolSize: this.tableData[i].clout * 30,
          value: [x, y],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,
            shadowBlur: 2,
            shadowColor: '#999999',
            color: 'green',
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            triggeron: 'mousemove',
            formatter: 'event'
          },
        });
      }

      const option = {
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: [{
          data: timeList
        }],
        yAxis: {
          show: false,
        },
        legend: {
          data: ['消极', '中性', '积极'],
          top: "15%",
          icon: "circle",
          x: 'right',
          orient: 'vertical',
          textStyle: { color: "#ffffff" }
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              data: markLineList,
              lineStyle: {
                type: 'dashed',
                color: '#999999',
              },
            },
            data: new_data,
            links: links,
            lineStyle: {
              type: 'solid',
              color: "rgb(0, 0, 0,80%)",
              width: "2",
            }
          }
        ]
      };
      echarts1.setOption(option);
    },
  }
};
</script>

<style scoped>
/* 样式保持不变 */
</style>
